import { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import { AtButton } from 'taro-ui'
import './index.scss'

import { dayTextFormat } from '@/utils/formatter'

const virtualArr = [
  {
    id: 1,
    url: require('@/assets/images/components/room.jpg'),
    name: '26楼展示厅',
    contain: 20,
    start: '2021-07-02',
    end: '2021-07-06',
    status: 0
  },
  {
    id: 2,
    url: require('@/assets/images/components/room.jpg'),
    name: '1楼大厅',
    contain: 30,
    start: '2021-07-01',
    end: '2021-07-03',
    status: 1
  },
  {
    id: 3,
    url: require('@/assets/images/components/room.jpg'),
    name: '2楼大厅',
    contain: 30,
    start: '2021-07-01',
    end: '2021-07-02',
    status: 1
  }
]

const RoomList = () => {
  const [roomData, setRoomData] = useState([])
  
  // 点击预约
  const appointment = ({ start, end, status }) => {
    console.log(`${status === 0 ? '我要预约' : '我已预约'}`)
    Taro.navigateTo({
      url: `/pages/schedule/index?start=${start}&end=${end}`
    })
  }

  // 请求数据
  const initData = () => {
    const data = virtualArr.map(item => ({ ...item }))
    setRoomData(data)
  }

  useEffect(() => {
    initData()
    return () => {}
  }, [])

  return (
    <View className='room-part'>
      <View className='room-list'>
        {
          roomData.length > 0 ? roomData.map(item => (
            <View key={item.id} className='room-item'>
              <Image
                src={item.url}
                mode='aspectFit'
                className='room-img'
              />
              <View className='room-info'>
                <View className='room-name'>{item.name}</View>
                <View className='room-contain'>容纳人数：{item.contain}人</View>
                <View className='open-date'>
                  开放日期：{ item.start === item.end ? `${dayTextFormat(item.start)}` : `${dayTextFormat(item.start)}至${dayTextFormat(item.end)}` }
                </View>
                <AtButton
                  size='small'
                  className='appointment-btn'
                  onClick={() => appointment(item)}
                >
                  { item.status === 0 ? '预约' : '已预约' }
                </AtButton>
              </View>
            </View>
          )) : <View>no data</View>
        }
      </View>
    </View>
  )
}

export default RoomList
